<template>
    <!-- pages/setcover/index.wxml -->
    <!-- pages/selectcover/index.wxml -->
    <view class="page-warp">
        <view class="item-warp bg-white box-sizing radius flexs align-center justify-between text-df">
            <text>封面简称:</text>
            <input class="item-input" :value="name" @input="getName" maxlength="6" placeholder="请输入6个字以内的简称, 生成封面" />
        </view>
        <view class="item-warp bg-white box-sizing radius flexs align-center justify-between text-df" @tap="onSelect">
            <text>选择封面模板</text>
            <van-icon name="arrow" />
        </view>
        <view class="item-cover bg-white box-sizing radius">
            <view class="flexs align-center justify-between text-df">
                <text>封面预览</text>
            </view>
            <image class="item-img" mode="aspectFit" :src="imgUrl"></image>
            <view class="btn-pre" @tap="btnPre">刷新预览</view>
        </view>
        <button class="btn-save bg-orange text-center text-lg radiues margin-xl" @tap="onSave">保存</button>
    </view>
</template>

<script>
// pages/setcover/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            name: '',
            coverId: '',
            imgUrl: '',
            upload2: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(options, options.name);

        if (options && options.name) {
            this.setData({
                name: options.name || ''
            });
        }

        _request
            .get('/storeCenterInfo/getCoverImg', {
                storeId: uni.getStorageSync('storeId') || ''
            })
            .then((res) => {
                if (res.data.code === 200) {
                    if (res.data.data && res.data.data.length > 0) {
                        this.setData({
                            imgUrl: res.data.data[0] || ''
                        });
                    }
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        //获取名称
        getName(e) {
            // console.log(e)
            this.setData({
                name: e.detail.value
            });
        },

        onSelect() {
            uni.navigateTo({
                url: '/pages/selectcover/index'
            });
        },

        //刷新预览
        btnPre() {
            if (!this.name) {
                uni.showToast({
                    title: '请输入简称',
                    icon: 'none'
                });
                return;
            }

            if (!this.coverId) {
                uni.showToast({
                    title: '请选择底图',
                    icon: 'none'
                });
                return;
            }

            _request
                .get('/storeCenterInfo/coverPreview', {
                    coverTitle: this.name,
                    coverId: this.coverId
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            imgUrl: res.data.data || ''
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '封面生成失败!',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //保存
        onSave() {
            let imgs = [];

            if (!this.name) {
                uni.showToast({
                    title: '请输入封面简称!',
                    icon: 'none'
                });
                return;
            }

            if (!this.imgUrl) {
                uni.showToast({
                    title: '请先生成封面图, 在保存!',
                    icon: 'none'
                });
                return;
            }

            let that = this;
            imgs.push(this.imgUrl);

            _request
                .postObj('/storeCenterInfo/updateCoverImg', {
                    coverTitle: that.name,
                    imgs: imgs,
                    storeId: uni.getStorageSync('storeId') || ''
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '保存成功!',
                            icon: 'none'
                        });
                        let pages = getCurrentPages();

                        if (pages.length > 1) {
                            let prevPage = pages[pages.length - 2];
                            prevPage.setData({
                                upload2: imgs
                            });
                        }

                        uni.navigateBack({
                            delta: 0
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '修改失败!',
                            icon: 'none'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/setcover/index.wxss */
.item-warp {
    margin: 20rpx 26rpx;
    padding: 20rpx;
}
.item-input {
    flex: 0.8;
    text-align: end;
}

.item-cover {
    margin: 20rpx 26rpx;
    padding: 20rpx;
}
.btn-pre {
    font-size: 14px;
    padding: 4px 10px;
    color: #ff9800;
    text-align: center;
    margin-top: 40rpx;
}

.item-img {
    margin-top: 40rpx;
}
</style>
